<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<style type="text/css">
	*{
		margin: auto 0px;
		padding: 0px;
	}
	
	form {
		padding: 6px;
		margin: auto;
		width: 94%;
		position: relative;
	}
	form ul li{
		list-style: none;
		width: 100%;
		margin-top: 30px;
	}
	#editor{
		width:100%;height:120%;
	}
	.myinput{
		width: 173px;
		border: 1px solid #000;
		border-radius: 5px;
		line-height:19px;
		padding: 2px;
	}
	.button{
		width: 10%;
		padding: 5px 20px 5px 5px;
		margin-left: 40%;
	}
	#picture{
		position: absolute;
		right: 70px;
		top: 80px;
		height: 200px;
		width:40%;
	}
	#select{
		height: 23px;
		width: 141px;
	}
	fieldset{
		height: 240px;
		border-radius: 5px;
		text-align:center;
		border:1px solid #000000;
	}
</style>
<form id="add_ArticleForm" action="" method="POST" enctype="multipart/form-data">
	<ul>
		<li>
			<label for="article_artTitle">文章标题：</label>
			<input name="title" id="article_artTitle" class="myinput">
		</li>
		<li>
			<label for="article_artAuth">文章作者：</label>
			<input name="author" id="article_artAuth" class="myinput">
		</li>
		<li>
			<label for="article_artStaTime">发布日期：</label>
			<input name="addtime" id="article_artStaTime" class="easyui-datebox myinput">
		</li>
		<li>
			<label for="article_artPic">文章图片：</label>
			<input id="imageFile" type="file" name="imageFile" onchange="getPic(this)">
		</li>
		<li>
			<label for="article_classify">文章分类：</label>
			<select name="typeid" id="typeid" class="myinput"></select>
		</li>
		<li>
			<label for="article_artWeight">文章权重：</label>
			<input name="weight" id="article_artWeight" class="easyui-numberbox myinput">
		</li>
		<li>
			<label for="article_contant">文章内容：</label>
			<div name="contant" id="article_contant">
				<textarea rows="5" cols="100" id="body" name="body" ></textarea>
				<script type="text/javascript">
					body = CKEDITOR.replace('body');
				</script>
			</div>
		</li>	
		<li>
			<input type="hidden" name="text" id="article_artText"/>
		</li>	
	</ul>
	<div id='picture'>
		<fieldset id="article_artPic_show">
			<legend>图片预览</legend>
		</fieldset>
	</div>
</form>

<script type="text/javascript">
	$(function(){
		//异步请求，取到所有的文章类型
		$.post("typeButton/findArticleType.do", function(data){
			for(var i = 0; i < data.length; i++)
			{	
				$("#typeid").append("<option value='"+ data[i].tid +"'>" + data[i].tname+ "</option>");
			}
		},"json");
	});
	//打开图片
	function getPic(objs){
		var pics=objs.files;
		var picPath=window.URL.createObjectURL(pics[0]);
		var imgStr= "<img src='"+picPath+"'  style='height:240px'/>"
		document.getElementById("article_artPic_show").innerHTML = imgStr;
	}
</script>
